共有 "basic", "image", "list" 三種類型

manifest.json

{
   "manifest_version": 2,
   "name": "ironman6",
   "version": "1.0",
   "browser_action": {  
      "default_popup": "index.html"  
   },
   "permissions": [
      "notifications"
   ]
}

index.html

        <title>ironman6</title>
        <style>body {width: 500px;}</style> 
    
    
    	<button id="showBasic">Show Basic</button><br/>
    	<button id="showImage">Show Image</button><br/>
    	<button id="showList">Show List</button>
        <script src="app.js"></script>
    

app.js

window.addEventListener("load", function() {
	document.querySelector("#showBasic").addEventListener("click", showBasic);
	document.querySelector("#showImage").addEventListener("click", showImage);
	document.querySelector("#showList").addEventListener("click", showList);

	chrome.notifications.onButtonClicked.addListener(notificationBtnClick);
});

var testImg = 'data:image/png;base64,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';

function showBasic(){
	chrome.notifications.create(
		'Notifier' + Date.now(), {
			type: 'basic',
			iconUrl: testImg,
			title: 'Ironman6',
			message: 'Day 14',
			buttons: [{
				title: 'Yes',
				iconUrl: testImg
			},{
				title: 'No',
				iconUrl: testImg
			}]
		},
		function(notificationId) {
			console.log(notificationId);
		}
	);
}

function showList(){
	chrome.notifications.create(
		'Notifier' + Date.now(), {
			type: 'list',
			iconUrl: testImg,
			title: 'Ironman6',
			message: 'Day 14',
			items: [{ title: "Item1", message: "Day 15"},
					{ title: "Item2", message: "Day 16"},
					{ title: "Item3", message: "Day 17"},
					{ title: "Item2", message: "Day 18"},
					{ title: "Item3", message: "Day 19"}]
		},
		function(notificationId) {
			console.log(notificationId);
		}
	);
}

function showImage(){
	chrome.notifications.create(
		'Notifier' + Date.now(), {
			type: 'image',
			iconUrl: testImg,
			title: 'Ironman6',
			message: 'Day 14',
			imageUrl: testImg
		},
		function(notificationId) {
			console.log(notificationId);
		}
	);
}

function notificationBtnClick(notID, iBtn) {
	console.log("The notification '" + notID + "' had button " + iBtn + " clicked");
}

要注意的是圖片只能使用 本地資源(local resource) 或是 data URL.